<template>
  <el-card class="enterprise-info" :body-style="{ padding: '20px' }">
    <h1>企业信息</h1>
    <div class="button-wrapper">
      <el-button type="primary" @click="toggleEdit">{{ isEditable ? '保存信息' : '变更信息' }}</el-button>
    </div>

    <!-- 企业信息部分 -->
    <div class="info-item">
      <label>申请角色：</label>
      <el-input v-model="departmentData.companyRole" :readonly="!isEditable"></el-input>
    </div>
    <div class="info-item">
      <label>企业名称：</label>
      <el-input v-model="departmentData.departmentName" :readonly="!isEditable"></el-input>
    </div>
    <div class="info-item">
      <label>注册地址：</label>
      <el-input v-model="departmentData.registeredAddress" :readonly="!isEditable"></el-input>
    </div>
    <div class="info-item">
      <label>统一社会信用代码：</label>
      <el-input v-model="departmentData.creditCode" :readonly="!isEditable"></el-input>
    </div>
    <div class="info-item">
      <label>营业执照：</label>
      <div>
        <!-- 如果是编辑状态，显示上传控件 -->
        <el-upload
            v-if="isEditable"
            class="upload-demo"
            :action="'http://'+serverIp() + ':8081/jdyfy/file/upload'"
            :on-success="handleFileUploadSuccess"
            :on-error="handleFileUploadError"
            accept="*/*"
            :limit="1"
        >
        <el-button size="small" type="primary">点击上传</el-button>
        </el-upload>

        <!-- 如果不是编辑状态，显示图片或提示 -->
        <img v-if="!isEditable && departmentData.businessLicense" :src="departmentData.businessLicense" alt="营业执照" width="200" height="250" />
        <span v-else-if="!isEditable">无</span>
      </div>
    </div>

    <h1 style="margin-top: 20px; margin-bottom: 20px">经营范围</h1>
    <div class="info-item">
      <label>所属行业：</label>
      <el-input v-model="departmentData.industry" :readonly="!isEditable"></el-input>
    </div>
    <div class="info-item">
      <label>经营范围：</label>
      <el-input v-model="departmentData.businessScope" :readonly="!isEditable"></el-input>
    </div>

    <h1 style="margin-top: 20px; margin-bottom: 20px">法人信息</h1>
    <div class="info-item">
      <label>法定代表人姓名：</label>
      <el-input v-model="departmentData.legalRepresentative" :readonly="!isEditable"></el-input>
    </div>
    <div class="info-item">
      <label>身份证号：</label>
      <el-input v-model="departmentData.legalIdNumber" :readonly="!isEditable"></el-input>
    </div>

    <h1 style="margin-top: 20px; margin-bottom: 20px">联系人信息</h1>
    <div class="info-item">
      <label>姓名：</label>
      <el-input v-model="departmentData.contactPerson" :readonly="!isEditable"></el-input>
    </div>
    <div class="info-item">
      <label>移动电话：</label>
      <el-input v-model="departmentData.contactPhone" :readonly="!isEditable"></el-input>
    </div>
    <div class="info-item">
      <label>电子邮箱：</label>
      <el-input v-model="departmentData.contactEmail" :readonly="!isEditable"></el-input>
    </div>
  </el-card>
</template>

<script>
import {addDepartment, getDepartByDepartName} from "@/api/department";
import {serverIp} from "../../../../public/config.js";

export default {
  name: 'EnterpriseInfo',
  data() {
    return {
      user: localStorage.getItem('user') ? JSON.parse(localStorage.getItem('user')) : {},
      departmentData: {},
      isEditable: false, // 控制是否可编辑
    };
  },
  created() {
    this.init();
  },
  methods: {
    serverIp() {
      return serverIp
    },
    init() {
      getDepartByDepartName(this.user.department).then(res => {
        this.departmentData = res;
      });
    },
    async toggleEdit() { // 切换编辑状态
      this.isEditable = !this.isEditable;
      if(!this.isEditable){
        //当切换为保存时
        await addDepartment(this.departmentData).then(res => {
          if (res) {
            this.$message.success('企业信息修改成功')
          } else {
            this.$message.error('企业信息修改失败')
          }
        })
      }
      this.init();
    },
    handleFileUploadSuccess(file) { this.departmentData.businessLicense = file; },
    handleFileUploadError(){ this.$message.error('文件上传失败，请重试'); },
  },
};
</script>

<style scoped>
.enterprise-info {
  max-width: 800px;
  margin: 0 auto;
}
.info-item {
  margin-bottom: 15px;
  display: flex;
  align-items: center;
}
.info-item label {
  width: 150px;
}
.button-wrapper {
  display: flex;
  justify-content: flex-end;
  margin-bottom: 20px;
}
.upload-demo i {
  font-size: 20px;
}
</style>
